<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM 基础讲解</title>
</head>
<body>
<h3> 什么是DOM</h3>
<p>
    DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API <br>
    白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能 (简单来说就是操作 标签)
</p>
<p>
    DOM作用 <br>
    开发网页内容特效和实现用户交互
</p>
<hr>

<h3> DOM树</h3>
<p>
    DOM树是什么 <br>
    将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 <br>
    描述网页内容关系的名词 <br>
    作用：文档树直观的体现了标签与标签之间的关系
</p>
<p>
    DOM树：以树状结构直观表现：<br>
    文档树或DOM树，直观地体现标签与标签之间的关系
    <img src="素材/DOM树.png" alt="">
</p>
<hr>

<h3>DOM对象（重要)</h3>
<p>
    DOM对象：浏览器根据html标签生成的 JS对象 (只要是对象,就有属性和方法) <br>
    所有的标签属性都可以在这个对象上面找到 <br>
    修改这个对象的属性会自动映射到标签身上
</p>
<p>
    DOM的核心思想 <br>
    把网页内容当做对象来处理
</p>
<p>
    document 对象 <br>
    是 DOM 里提供的一个对象 (DOM 最大的对象) <br>
    题外话: document是针对DOM而言, 整一个window对象还包括BOM和JS脚本两类<br><br>

    它提供的属性和方法都是用来 访问和操作网页内容的 <br>
    例：document.write() <br>
    网页所有内容都在document里面
</p>
<hr>

<div>123</div> <!-- 标签 -->
<script>
    // 这里演示 标签定义成对象 操作
    const div对象 = document.querySelector('div')
    // 打印对象, 输出到页面
    console.dir(div对象)  // dom 对象
</script>
</body>
</html>